import React, { useState, useEffect } from "react";
import { Form, Input, Button, Toast } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import "./update_password.css";
import axios from "axios";

export default function Update_password() {
  const navigate = useNavigate();
  const [form] = Form.useForm();
  // 通过useState来控制新密码和确认密码的显示状态
  const [newPasswordVisible, setNewPasswordVisible] = useState(false);
  const [confirmPasswordVisible, setConfirmPasswordVisible] = useState(false);

  const [user, setuser] = useState({});

  useEffect(() => {
    getUser();
  }, []);

  const getUser = async () => {
    try {
      const res = await axios.get("http://127.0.0.1:8000/loginInfo");
      console.log(res.data.data); // 确认返回的数据

      if (res.data.code === 200) {
        // 假设返回的是一个包含多个用户信息的数组
        setuser(res.data.data);
      }
    } catch (error) {
      console.log("我的..获取用户信息失败！" + error);
    }
  };

  const onSubmit = async () => {
    const { newPassword, confirmPassword } = form.getFieldsValue();
    let id = null;
    if (newPassword !== confirmPassword) {
      Toast.show({
        icon: "fail",
        content: "两次输入的密码不一致,请重新输入",
        duration: 3000,
        style: {
          fontSize: "30px",
        },
      });
      return;
    }
    if (user) {
      console.log(user);
      id = user._id;
    }

    try {
      const res = await axios.post("http://127.0.0.1:8000/update_password", {
        newPassword,
        id,
      });
      if (res.data.code === 200) {
        Toast.show({
          icon: "success",
          content: "修改成功",
        });
        navigate("/set"); // 跳转到 set 页面
      }
    } catch (error) {
      console.log("修改用户密码失败！" + error);
    }
  };

  return (
    <div className="update_password">
      <div className="password-top">
        <div className="fan_hui" onClick={() => navigate("/set")}>
          <svg
            t="1733569062653"
            className="icon"
            viewBox="0 0 1307 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4775"
            width="16"
            height="16"
          >
            <path
              d="M268.70922 566.468085h929.588652c36.312057 0 72.624113-29.049645 72.624114-72.624113 0-36.312057-29.049645-72.624113-72.624114-72.624114H305.021277l297.758865-297.758865c29.049645-29.049645 29.049645-72.624113 0-101.673759-29.049645-29.049645-72.624113-29.049645-101.673759 0L72.624113 450.269504c-14.524823 14.524823-21.787234 36.312057-21.787234 58.09929 0 21.787234 0 43.574468 21.787234 58.099291l428.48227 428.48227c29.049645 29.049645 72.624113 29.049645 101.673759 0 29.049645-29.049645 29.049645-72.624113 0-101.673759l-334.070922-326.808511z"
              fill=""
              p-id="4776"
            ></path>
          </svg>
        </div>
      </div>
      <div className="password-desc">
        <h1>修改密码</h1>
        <p>请设置6-12位字母数字组合新密码</p>

        <Form
          requiredMarkStyle="text-required"
          form={form}
          footer={
            <Button block color="primary" onClick={onSubmit} size="large">
              提交
            </Button>
          }
        >
          {/* 新密码 */}
          <Form.Item name="newPassword" rules={[{ required: true }]}>
            <Input
              type={newPasswordVisible ? "text" : "password"} // 控制显示和隐藏
              placeholder="新密码"
              extra={
                <div
                  onClick={() => setNewPasswordVisible(!newPasswordVisible)} // 切换新密码的显示状态
                  style={{ cursor: "pointer" }}
                >
                </div>
              }
            />
          </Form.Item>

          {/* 确认密码 */}
          <Form.Item name="confirmPassword" rules={[{ required: true }]}>
            <Input
              type={confirmPasswordVisible ? "text" : "password"} // 控制显示和隐藏
              placeholder="确认密码"
              extra={
                <div
                  onClick={() =>
                    setConfirmPasswordVisible(!confirmPasswordVisible)
                  } // 切换确认密码的显示状态
                  style={{ cursor: "pointer" }}
                >
                 
                </div>
              }
            />
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
